<template>
  <div class="app-container">
    <el-row type="flex" justify="center">
      <el-col
        :xs="24"
        :sm="24"
        :md="8"
        :lg="6"
        :xl="5"
        style="margin-bottom: 10px; width: 500px;"
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <div style="text-align: center">
              <img :src="getAvatar()" class="avatar" />
            </div>
            <ul class="user-info">
              <li>
                <div style="height: 100%">
                  姓名
                  <div class="user-right">{{ user.userName }}</div>
                </div>
              </li>
              <li>
                学号
                <div class="user-right">{{ user.studentId }}</div>
              </li>
              <li>
                学校
                <div class="user-right">{{ user.collegeName }}</div>
              </li>
              <li>
                专业班级
                <div class="user-right">{{ user.orgName }}</div>
              </li>
              <li>
                性别
                <div class="user-right">
                  {{ user.sex === true ? '男' : '女' }}
                </div>
              </li>
              <li>
                角色
                <div class="user-right">{{ user.roleName }}</div>
              </li>
              <li>
                职位
                <div class="user-right">{{ user.description }}</div>
              </li>
              <li>
                安全设置
                <div class="user-right">
                  <a style="cursor:pointer" @click="$refs.pass.dialog = true"
                    >修改密码</a
                  >
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19" class="setting">
        <el-card class="box-card">
          <el-tabs v-model="activeName">
            <el-tab-pane label="资料配置" name="first">
              <el-form
                ref="form"
                :model="form"
                :rules="rules"
                style="margin-top: 10px;"
                size="small"
                label-width="75px"
              >
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="form.email" style="width: 35%;" />
                  <span style="color: #C0C0C0;margin-left: 10px;"
                    >邮箱不能重复</span
                  >
                </el-form-item>
                <el-form-item label="手机号" prop="phoneNumber">
                  <el-input v-model="form.phoneNumber" style="width: 35%;" />
                  <span style="color: #C0C0C0;margin-left: 10px;"
                    >手机号码不能重复</span
                  >
                </el-form-item>
                <el-form-item label="QQ" prop="qqId">
                  <el-input v-model="form.qqId" style="width: 35%;" />
                </el-form-item>
                <el-form-item label="微信" prop="weChatId">
                  <el-input v-model="form.weChatId" style="width: 35%;" />
                </el-form-item>
                <el-form-item label="性别">
                  <el-radio-group v-model="form.sex" style="width: 178px">
                    <el-radio :label="true">男</el-radio>
                    <el-radio :label="false">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="政治面貌" prop="politicalVisage">
                  <el-input
                    v-model="form.politicalVisage"
                    style="width: 35%;"
                  />
                </el-form-item>
                <el-form-item label="籍贯" prop="placeOfOrigin">
                  <el-input v-model="form.placeOfOrigin" style="width: 35%;" />
                </el-form-item>
                <el-form-item label="民族" prop="nation">
                  <el-input v-model="form.nation" style="width: 35%;" />
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                  <el-input v-model.number="form.age" style="width: 35%;" />
                  <span style="color: #C0C0C0;margin-left: 10px;"
                    >必须输入数字</span
                  >
                </el-form-item>
                <el-form-item label>
                  <el-button
                    :loading="saveLoading"
                    size="mini"
                    type="primary"
                    @click="SaveConfig"
                    >保存配置</el-button
                  >
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    <updatePass ref="pass" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import updatePass from '@/components/common/updatePass'
import { getUserInfo } from '@/network/index'
import { updateUserInfo } from '@/network/config'

export default {
  name: 'about',
  computed: {
    ...mapGetters(['userinfo', 'userid'])
  },
  components: {
    updatePass
  },
  data() {
    // 自定义验证
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入电话号码'))
      } else if (!this.isvalidPhone(value)) {
        callback(new Error('请输入正确的11位手机号码'))
      } else {
        callback()
      }
    }
    return {
      activeName: 'first',
      saveLoading: false,
      //   avatar: require('IMAGES/avatar.png'),
      //   career: require('IMAGES/career.png'),
      user_Id: 0,
      userInfo_Id: 0,
      user: {
        userName: '',
        studentId: '',
        collegeName: '',
        orgName: '',
        sex: false,
        roleName: '',
        description: ''
      },
      form: {
        email: '',
        phoneNumber: '',
        qqId: '',
        weChatId: '',
        sex: false,
        politicalVisage: '',
        placeOfOrigin: '',
        nation: '',
        age: ''
      },
      rules: {
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        phoneNumber: [
          { required: true, trigger: 'blur', validator: validPhone }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      let params = {
        user_id: this.userid
      }
      // 根据id获取用户信息，渲染页面
      getUserInfo(params).then(res => {
        if (res.code === 401) {
          this.$toast(res.message, 'error')
        }
      })
      getUserInfo(params)
        .then(res => {
          if (res.code === 401) {
            this.$toast(res.message, 'error')
          }
          this.$store.dispatch('getUserInfo', res.data)
          this.user.userName = JSON.parse(this.userinfo).username
          this.user.studentId = JSON.parse(this.userinfo).studentid
          this.user.collegeName = JSON.parse(this.userinfo).userinfo.organization.parenttoid.collegename
          this.user.orgName = JSON.parse(this.userinfo).userinfo.organization.orgname
          this.user.sex = JSON.parse(this.userinfo).userinfo.sex
          this.user.roleName = JSON.parse(this.userinfo).role.rolename
          this.user.description = JSON.parse(this.userinfo).role.description
          this.form.email = JSON.parse(this.userinfo).email
          this.form.phoneNumber = JSON.parse(this.userinfo).phonenumber
          this.form.qqId = JSON.parse(this.userinfo).qqid
          this.form.weChatId = JSON.parse(this.userinfo).wechatid
          this.form.sex = JSON.parse(this.userinfo).userinfo.sex
          this.form.politicalVisage = JSON.parse(this.userinfo).userinfo.politicalvisage
          this.form.placeOfOrigin = JSON.parse(this.userinfo).userinfo.placeoforigin
          this.form.nation = JSON.parse(this.userinfo).userinfo.nation
          this.form.age = JSON.parse(this.userinfo).userinfo.age
        })
        .catch(err => {
          return err
        })
    },
    getAvatar() {},
    // 点击保存配置
    SaveConfig() {
      if (this.$refs['form']) {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.saveLoading = true
            this.updateAbout()
            this.saveLoading = false
          }
        })
      }
    },
    // 获取参数，更新信息
    updateAbout() {
      const params = {}
      params.user_Id = this.userid
      params.userinfo_Id = JSON.parse(this.userinfo).userinfo.userinfo_id
      params.email = this.form.email
      params.phoneNumber = this.form.phoneNumber
      params.qqId = this.form.qqId
      params.weChatId = this.form.weChatId
      params.sex = this.form.sex
      params.politicalVisage = this.form.politicalVisage
      params.placeOfOrigin = this.form.placeOfOrigin
      params.nation = this.form.nation
      params.age = this.form.age
      updateUserInfo(params).then(res => {
        if (res.code === 200) {
          this.$notify({
            title: '成功',
            message: res.message,
            type: 'success'
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: res.message
          })
        }
      })
    },
    // 手机号验证
    isvalidPhone(phone) {
      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
      return reg.test(phone)
    }
  }
}
</script>

<style lang="scss">
.app-container {
  padding: 20px;
}

.add-button {
  margin-bottom: 15px;
}

.avatar-uploader-icon {
  font-size: 28px;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
}

.user-info {
  padding-left: 0;
  list-style: none;

  li {
    border-bottom: 1px solid #f0f3f4;
    padding: 11px 0;
    font-size: 13px;
  }
  .user-right {
    float: right;

    a {
      color: #317ef3;
    }
  }
}
.setting {
  margin-left: 2%;
}
</style>
